<template lang="pug">
//- 纯自定义头部，与胶囊对齐
view.navbar.flex(:style="`--b-top: ${data.bounding.top}px; --b-left: ${data.bounding.left}px; --b-height: ${data.bounding.height}px;`")
  view.flex
    slot 
</template>
<script setup>
import {reactive} from 'vue'
import {onLoad} from '@dcloudio/uni-app'

const data = reactive({
  bounding:{
    top: 51,
    left: 0,
    height: 32,
  }
})

onLoad(()=>{
  let {height, top, right, width, left = 0} = uni.getMenuButtonBoundingClientRect()
  const {windowWidth} = uni.getWindowInfo()
  top -= 8
  height += 16
  left = windowWidth - right
  Object.assign(data.bounding, {top, height, left})
})
</script>
<style lang="scss" scoped>
@use '/common/scss/mixin.scss' as *;
.navbar{
  @include bg(var(--navbar-bgcolor, var(--bg-color-white)));
  padding: var(--b-top) var(--b-left) 0 var(--b-left);
  height: var(--b-height);
}
</style>